<template>
    <div id="login">
        <div class="login-box">
            <form action="">
                <div style="text-align:center">
                    <img src="../../assets/images/code.png" alt="" width="200px" height="200px">
                </div>
                <div class="input-div">
                    <span class="form-label">账户名：</span>
                    <span><input type="text" v-model="Iusername" placeholder="请输入用户名"></span>
                </div>
                <div class="input-div">
                    <span class="form-label">密码：</span>
                    <span><input type="password" v-model="Ipassword" placeholder="请输入密码"></span>
                </div>
            </form>
            <div class="sub-div">
                <span><input type="checkbox" name="remember" id="">一周之内免登录</span>
            </div>
            <div class="sub-div">
                <button class="btn" @click="goHome">登录</button>
            </div>
            <div class="sub-div">
                <span >新用户注册</span>
                <span>忘记密码</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'login',
    data(){
        return{
            user:{username:'xiaolee',password:'123456'},
            Iusername:'',
            Ipassword:'',
        }
    },
    methods:{
        goHome(){
            let {username,password} = this.user
            if(this.Iusername=='' || this.Ipassword==''){
                alert('用户名或密码不能为空')
                return
            }
            if(this.Iusername==username && this.Ipassword==password){
                alert('登录成功')
                localStorage.setItem('user',username)
                this.$router.push('/index')
            }else{
                alert('用户名或密码错误')
                return
            }
        }
    }
}
</script>

<style scoped>
    * {
        margin: 0;
        padding: 0;
    }

    #login {
        background-image: url('../../assets/images/shopping_bg3.jpg');
        width: 100%;
        height: 100%;
        background-size: 100%;
        position: fixed;
        display: grid;
        place-items: center;
    }

    .login-box {

        padding: 30px 0px;
        background-color: white;
        /* position: fixed; */
        /* top: 25%; */
        /* left: 28%; */
        margin: 0 auto;
        /* float: right; */
        width: 600px;
        /* height: 400px; */
    }

    .main_form {
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .input-div {
        display: flex;
        justify-content: center;
        line-height: 40px;
        width: 80%;
        margin: 0 auto;
        align-items: center;
        border: rgb(215, 215, 215) 2px solid;
    }

    .sub-div {
        /* width:80%; */
        margin: 10px auto;
        width: 80%;
        display: flex;
        justify-content: space-between;
        flex-direction: row;
    }
    
    .input-div input {
        border: 0px;
        font-size: 16px;
        text-align: center;
        line-height: 40px;
        width: 100%;
    }

    .form-label {
        width: 30%;
        text-align: center;
    }

    .btn {
        color: #FFFFFF;
        cursor: pointer;
        width: 100%;
        line-height: 40px;
        font-size: 17px;
        border-radius: 10px;
        border: 0px;
        background-color: rgb(214, 0, 0);
    }

    .btn:hover {
        color: #FFFFFF;
        cursor: pointer;
        width: 100%;
        line-height: 40px;
        font-size: 17px;
        border-radius: 10px;
        border: 0px;
        background-color: rgb(200, 0, 0);
    }
</style>